<template>
	<div v-theme:column="'wide'" id="addBlog">
		<h2>写帖子</h2>
		<form v-if="!submited">
			<label>标题 </label><input type="text" v-model="blog.title" /> <label>内容 </label
			><textarea v-model="blog.content"></textarea>
			
			<label>作者</label>
			<select v-model="blog.author">
				<option v-for="author in authors" :key="author">
					{{ author }}
				</option>
			</select>
			<button @click="post">发布</button>
		</form>
		<br />
		<h3 v-if="submited">发布成功！</h3>
		<br />
		<hr />
		<div class="preview">
			<h3>帖子预览</h3>
			<br />
			<p>标题：{{ blog.title }}</p>
			<br />
			<p>内容：{{ blog.content }}</p>
			<br />
			<p>作者：</p>
			{{ blog.author }}
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	name: 'addBlog',
	data() {
		return {
			blog: {
				title: '',
				content: '',
				author: '',
			},
			authors: ['张三', '李四', '王五'],
			submited: false,
		}
	},
	methods: {
		post() {
			if (this.blog.title !== '') {
				this.$store.commit('postBlog',this.blog)
				this.submited = true
				this.$router.push({ path: '/' })
			} else {
				alert('博客标题不能为空！')
			}
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#addBlog * {
	box-sizing: border-box;
}
#addBlog {
	min-width: 500px;
	margin: 0 auto;
	border-radius: 10px;
	margin-bottom: 30px;
}
label {
	display: block;
	margin: 20px 0 10px;
}
input[type='text'],
textarea,
select {
	display: block;
	width: 100%;
	padding: 8px;
	border-radius: 5px;
	outline: none;
}
textarea {
	height: 200px;
	margin-bottom: 10px;
}
.checkBoxes label {
	display: inline-block;
	margin-top: 0;
}
.checkBoxes input {
	display: inline-block;
	margin-left: 10px;
}
button {
	display: block;
	margin: 20px 0;
	background: #007acc;
	color: #fff;
	border: 0;
	padding: 14px;
	border-radius: 4px;
	font-size: 18px;
	cursor: pointer;
	outline: none;
}
.preview {
	padding: 10px 20px;
	border: 1px dotted #ccc;
	margin: 30px 0;
}
.preview ul li {
	margin-left: 65px;
}
.preview h3 {
	margin-top: 10px;
}
</style>
